<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
	<style type="text/css">
.ui-widget {
	font-size: 12px !important;
}
</style>
</h:head>

<h:body>
	<ui:composition template="Layout.xhtml">
		<ui:define name="content">
		
		<!-- <p:ajaxStatus style="width:16px;height:16px;">
				<f:facet name="start">
					<h:graphicImage value="img/ajaxLoader.gif" />
				</f:facet>

				<f:facet name="complete">
					<h:outputText value="" />
				</f:facet>
			</p:ajaxStatus> -->

			<h:form>

				<p:panel id="panel" header="Neuer Kunde">
					<p:messages />
					<h:panelGrid columns="3" columnClasses="column" cellpadding="5">
						<h:outputLabel for="firstname" value="Vorname: " />
						<p:inputText id="firstname" value="#{register.user.firstname}"
							required="true" label="Firstname">
							<f:validateLength minimum="2" />
						</p:inputText>
						<p:message for="firstname" />

						<h:outputLabel for="lastname" value="Nachname: " />
						<p:inputText id="lastname" value="#{register.user.lastname}"
							required="true" label="lastname">
							<f:validateLength minimum="2" />
						</p:inputText>
						<p:message for="lastname" />

						<h:outputLabel for="street" value="Straße: " />
						<p:inputText id="street" value="#{register.user.street}"
							required="true">
							<f:validateLength minimum="2" />
						</p:inputText>
						<p:message for="street" />

						<h:outputLabel for="city" value="Ort: " />
						<p:inputText id="city" value="#{register.user.city}"
							required="true">
							<f:validateLength minimum="2" />
						</p:inputText>
						<p:message for="city" />

						<h:outputLabel for="age" value="Alter: " />
						<p:calendar id="age" value="#{register.user.age}" required="true"
							mode="inline" navigator="true" />
						<p:message for="age" />

						<h:outputText value="Password: " />
						<p:password id="password" value="#{register.user.password}"
							required="true" label="Password" />
						<p:message for="password" />
						
						<h:outputText value="Passwort bestätigen: " />
						<p:password id="pass2" value="#{register.confirmPass}"
							required="true" feedback="false">
                    	</p:password>
                    	<p:message for="pass2" />

						<h:outputLabel for="email" value="Email: " />
						<p:inputText id="email" value="#{register.user.email}"
							required="true" label="Email">
							<f:validator validatorId="EmailValidator" />
						</p:inputText>
						<p:message for="email" />

					</h:panelGrid>

					<p:commandButton id="btn" value="Register" update="panel"
						action="#{register.submit}" />
				</p:panel>
			</h:form>

			<script type="text/javascript">
				function fadein(input, container) {
					container.fadeIn("slow");
				}

				function fadeout(input, container) {
					container.fadeOut("slow");
				}
			</script>
		</ui:define>
	</ui:composition>
</h:body>
</html>
